<template>
  <!-- 1.3.6 环境监控-->
  <div class="ecocrisis mediumtablestyle">
    <div class="main betweenbox">
      <div class="main-right borderStyle colbetweenbox">
        <!-- 1.顶部一行的菜单 -->
        <div class="main-right-menu betweenbox">
          <div
            class="item centerbox"
            v-for="(item,index) in menuList"
            :key="index"
            @click="changeMenu(item)"
            :class="{active:activeMenu===item.SBID}"
            :title="item.name"
            ref="itemName"
          >{{item.name}}</div>
          <!-- <div class="option colcenterbox" v-if="showOptionStatus" @mouseleave="hideOption">
            <div
              class="item centerbox"
              v-for="(m,n) in menuList.slice(3)"
              :key="n+'n'"
              @click="changeMenu(m)"
              :title="m.name"
            >{{m.name}}</div>
          </div>-->
        </div>
        <!-- 4.表格 -->
        <div class="main-right-table tableClass">
          <el-table
            :data="tableDta"
            style="width: 100%"
            height="100%"
            @selection-change="handleSelectionChange"
            :row-class-name="tableRowClassName"
            :span-method="objectSpanMethod"
            border
          >
            <el-table-column
              sortable
              :sort-method="sortMethod"
              prop="deviceName"
              label="设备名称"
              :show-overflow-tooltip="true"
              width="100"
            ></el-table-column>
            <el-table-column prop="name" label="采集名称" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="监测值" width="75" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <!-- 1 遥测 数值 -->
                <div
                  v-if="scope.row.remoteType=='1'"
                  :class="[scope.row.status=='0' ?'orange0':'',scope.row.status=='1' ?'orange1':'', scope.row.status=='2' ?'orange2':'',scope.row.status=='3' ?'orange3':'',scope.row.status=='4' ?'orange4':'',scope.row.status=='5' ?'orange5':'' ]"
                >
                  <span>{{(scope.row.pointerDict && scope.row.value&&scope.row.pointerDict[Number(scope.row.value)])?(scope.row.pointerDict[Number(scope.row.value)].name):scope.row.value?scope.row.value:'--'}}</span>
                  <span>{{scope.row.unit?scope.row.unit:'' }}</span>
                </div>
                <!-- 2-遥信-状态 3-遥控-开关变位 4-遥调 -->
                <div v-else>
                  <span
                    v-if="scope.row.pointerDict &&scope.row.pointerDict.length>0&&scope.row.pointerDict[Number(scope.row.value)]"
                    :class="{abnormal:scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name.indexOf('警')>-1?true:false:false,orange0:scope.row.status=='0',orange1:scope.row.status=='1',orange2:scope.row.status=='2',orange3:scope.row.status=='3',orange4:scope.row.status=='4',orange5:scope.row.status=='5'}"
                  >{{ scope.row.value?scope.row.pointerDict[Number(scope.row.value)].name:'未知'}}</span>
                  <span v-else>--</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="time" label="采集时间" width="100" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <div
                  v-if="scope.row.time"
                >{{scope.row.time.substring(0,10)}} {{scope.row.time.substring(11,19)}}</div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 历史折线数据 -->
          <div class="middleRight" style="width: 50%">
            <div class="blueTitleStyle">{{monitorType}}</div>
            <div
              class="linechart"
              v-loading="loading2"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
            >
              <v-chart :options="option" :auto-resize="true" @click="chartClick" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { menuListType, tableDataList, objType } from "@/utils/interface";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { GetSocketModule } from "@/store/modules/GetSocketData";
import _ from "lodash";
import Nodata from "@/components/Nodata/index.vue";
import date from "@/utils/date";
import time from "@/utils/time.js";
import { log } from "three";

interface SpanMethodType {
  row: object;
  column: object;
  rowIndex: number;
  columnIndex: number;
}
@Component({
  components: { Nodata },
})
export default class extends Vue {
  monitorType: string = "";
  // 图表数据状态
  loading2 = false;
  //数据状态
  nodata = false;
  popTitleName: string = "";
  // 1.顶部菜单
  public oldMenuList: any = [
    {
      name: "微气象",
      SBID: "0402",
      active: true,
    },
    {
      name: "温湿度传感器",
      SBID: "0401",
      active: false,
    },
    {
      name: "SF6气体浓度传感器",
      SBID: "0406",
      active: false,
    },
    {
      name: "风机",
      SBID: "0403",
      active: false,
    },
    {
      name: "空调",
      SBID: "0407",
      active: false,
    },
    {
      name: "SF6主机",
      SBID: "0409",
      active: false,
    },
    {
      name: "水浸传感器",
      SBID: "0408",
      active: false,
    },
  ];
  public activeMenu: string = "";
  public showOptionStatus: boolean = false;
  public option: any = {
    color: ["#2CACFB"],
    grid: {
      left: "5%",
      top: "10%",
      right: "6%",
      bottom: "12%",
      containLabel: true,
    },
    tooltip: {
      show: true,
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff",
        // interval: 0,
        rotate: 45,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(17,24,45,1)",
        },
      },
      data: [],
      // data: [
      //   "2020/2/5",
      //   "2020/2/6",
      //   "2020/2/7",
      //   "2020/2/8",
      //   "2020/2/9",
      //   "2020/2/10",
      //   "2020/2/11",
      // ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#466BC2",
        },
      },
      splitLine: {
        lineStyle: {
          type: "solid",
          color: "rgba(17,24,45,1)",
        },
      },
    },
    dataZoom: [
      {
        type: "slider",
        show: true,
        height: 20,
        right: "10%",
        left: "10%",
        bottom: "1%",
        start: 0,
        // end: 100,
        textStyle: {
          color: "#d4ffff",
          fontSize: 11,
        },
      },
      {
        type: "inside",
      },
    ],
    series: [
      {
        // data: [820, 932, 901, 934, 1290, 1330, 1320],
        data: [],
        type: "line",
        showAllSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(34, 107, 229, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(34, 107, 229, 0)", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };
  tableSelect: Array<object> = [];
  list = {};
  // get changeStationName() {
  //   let name: any = AuxiliaryMonitorModule.stationName;
  //   if (!name) {
  //     name = this.$route.query.name;
  //   }
  //   return name;
  // }

  //设备类型为单位的点位数组
  get getDeviceInfo() {
    var xtInfo = AuxiliaryMonitorModule.getxtInfo || {};
    xtInfo = _.cloneDeep(xtInfo);
    // console.log(xtInfo);
    var firefightInfo = xtInfo["04"] || [];
    var firefightDeviceobj = {
      "0402": [],
      "0401": [],
      "0406": [],
      "0403": [],
      "0407": [],
      "0408": [],
      "0409": [],
    };
    firefightInfo.map((k) => {
      firefightDeviceobj[k.sbValue] = firefightDeviceobj[k.sbValue] || [];
      firefightDeviceobj[k.sbValue].push(k);
    });
    // console.log(firefightDeviceobj);
    //去掉 0409的不要东西
    firefightDeviceobj["0409"] = this.pingbiFun(firefightDeviceobj["0409"]);
    // 区域房间图片处理
    var areaInfo = firefightDeviceobj[this.activeMenu] || [];
    // console.log(areaInfo);

    const res = new Map();
    areaInfo = areaInfo.filter((a) => !res.has(a.area) && res.set(a.area, 1));

    return firefightDeviceobj;
  }

  // 2.2点击区域图片 切换数据
  activeAreaId = "";
  changeArea(item) {
    // console.log("item:", item);
    this.activeAreaId = item.area;
    this.visi = item.area;
  }

  // 2.3 区域图片左右按钮切换
  public visi: any = "";
  public colorLeft: number = 0;
  public colorRight: number = 0;
  public lefts: any = 0;
  //向左
  left() {
    if (this.lefts == 0) {
      return;
    } else {
      this.colorRight = 1;
      this.lefts = this.lefts + 33.3;
      if (this.lefts == 0) {
        this.colorLeft = 0;
      }
    }
  }

  sortMethod(a, b) {
    return a.status - b.status;
  }
  // 顶部菜单xin
  get menuList() {
    var lists = this.oldMenuList;
    let titledata = [];
    // console.log(this.getDeviceInfo);

    for (let key in this.getDeviceInfo) {
      if (this.getDeviceInfo[key].length > 0) {
        let obj = lists.filter((a) => a.SBID == key)[0];
        if (obj) {
          titledata.push(obj);
        }
      }
    }
    // console.log('this.activeMenu:',this.activeMenu);
    if (!this.activeMenu) {
      this.activeMenu = titledata.length > 0 ? titledata[0].SBID : "";
    }
    let oneitemlist = this.oneitemlist;
    if (oneitemlist && titledata.indexOf(oneitemlist) > 2) {
      // 把原来那条删掉
      titledata.splice(titledata.indexOf(oneitemlist), 1);
      // 加到第一条
      titledata.unshift(oneitemlist);
    }
    // console.log(titledata);
    return titledata;
  }

  // 4.表格数据
  get tableData() {
    var menu = this.activeMenu;
    // console.log(menu); // 头部单元格的内容

    // console.log(this.getDeviceInfo);

    var getDeviceInfo2 = JSON.parse(JSON.stringify(this.getDeviceInfo));
    // console.log(getDeviceInfo2);

    var data = getDeviceInfo2[menu] || [];
    let res = new Map();
    data = data.filter((data) => !res.has(data.id) && res.set(data.id, 1));
    let newdata: any = [];
    if (this.activeAreaId) {
      data.map((k) => {
        if (k.area == this.activeAreaId) {
          newdata.push(k);
        }
      });
    } else {
      newdata = data;
    }

    if (menu == "0403" || menu == "0407") {
      newdata = this.ktcontrol(newdata);
      newdata = this.getSpanArr(newdata, "control");
    } else if (menu == "0408") {
      newdata = this.pingbiFun(newdata);
      newdata = this.getSpanArr(newdata, "normal");
    } else if (this.oneitemlist.SBID == "0409" && newdata) {
      newdata = this.pingbiFun(newdata);
      newdata = this.getSpanArr(newdata, "control");
    } else {
      newdata = this.getSpanArr(newdata, "normal");
    }
    console.log(newdata);
    // newdata = newdata.sort((a, b) => a.status - b.status);
    return newdata;
  }

  //判断方位
  fw(data) {
    data.map((v) => {
      if (v.remoteType == "1" && v.dwValue == "040202") {
        if (v.value == 0 || v.value == 360) {
          // 南
          v.value = 2;
        } else if (v.value > 0 && v.value < 90) {
          // 西南
          v.value = 7;
        } else if (v.value == 90) {
          // 西
          v.value = 3;
        } else if (v.value > 90 && v.value < 180) {
          // 西北
          v.value = 8;
        } else if (v.value == 180) {
          // 北
          v.value = 4;
        } else if (v.value > 180 && v.value < 270) {
          // 东北
          v.value = 6;
        } else if (v.value == 270) {
          // 东
          v.value = 1;
        } else if (v.value > 270 && v.value < 360) {
          // 东南
          v.value = 5;
        }
      }
    });

    return data;
  }
  // 空调的遥控遥调不展示，拿到点位id
  ktcontrol(data) {
    let obj = {};
    let newData = [];
    if (data.length > 0) {
      data.map((k) => {
        obj[k.deviceId] = obj[k.deviceId] || [];
        obj[k.deviceId].push(k);
      });
    }
    for (let key in obj) {
      let itemObj = { watch: [], control: [] };
      let itemList = obj[key];
      itemList.forEach((v) => {
        if (v.remoteType === "1" || v.remoteType === "2") {
          itemObj.watch.push(v);
        } else {
          itemObj.control.push(v);
        }
      });
      obj[key] = itemObj;
    }
    let list = [];
    for (let key in obj) {
      let item = obj[key];
      item.watch.forEach((v) => {
        v.control = item.control;
        list.push(v);
      });
    }
    return list;
  }
  // 控制id、给状态数据上去
  controltostate(data) {
    var selected = [];
    for (let i = 0; i < data.length; i++) {
      for (let j = 0; j < data.length; j++) {
        if (data[i].remoteType == 3) {
          if (data[i].deviceId == data[j].deviceId) {
            if (data[j].remoteType == 2) {
              data[j].kzid = data[i].id; // 控制id 给到状态数据上面去
              selected.push(data[j]);
            }
          }
        } else if (data[i].remoteType == 1) {
          if (data[i].deviceId == data[j].deviceId) {
            if (data[j].remoteType == 1) {
              selected.push(data[j]);
            }
          }
        }
      }
    }
    return selected;
  }
  // 屏蔽方法
  pingbiFun(data) {
    let newdata = [];
    let pingbiPointdata = [
      "010503", // "火灾探测器屏蔽",
      "010903", // "烟感屏蔽",
      "020206", // "电子围栏屏蔽",
      "020207", // "电子围栏屏蔽状态",
      "020305", // "红外对射屏蔽",
      "020306", // "红外对射屏蔽状态",
      "020405", // "双鉴屏蔽",
      "020406", // "双鉴屏蔽状态",
      "040816", // "水浸探测器屏蔽",
      "040817", // "水浸探测器屏蔽状态",
      "040902", // "SF6主机屏蔽",
      "040903", // "SF6主机屏蔽状态",
      "010108", // "站端消防控制器屏蔽总",
    ];
    let remote2 = 0;
    let remote3 = 0;
    data.map((k, j) => {
      if (k.remoteType == "2") {
        if (pingbiPointdata.indexOf(k.dwValue) > -1) {
          //  第二种
          return;
        } else {
          //  第一种
          newdata.push(k);
          remote2++;
        }
      } else if (k.remoteType == "3") {
        //  第三种
        if (pingbiPointdata.indexOf(k.dwValue) > -1) {
          return;
        } else {
          newdata.push(k);
          remote3++;
        }
      }
    });
    if (remote3 > 0) {
      newdata = this.controltostate(newdata);
    }
    return newdata;
  }
  // 控制的点位类型
  controlTypeList = ["040702"];
  // 返回辅助监控首页
  goBack() {
    // AuxiliaryMonitorModule.setActiveRouter(1);
    this.$router.push("overview");
  }
  tableStatus = true;
  oneitemlist: any = {};
  // 1.显示的菜单切换
  changeMenu(item: any) {
    this.oneitemlist = item;
    // this.activeAreaId = "";
    // this.lefts = 0;
    this.activeMenu = item.SBID;
  }

  showOption() {
    this.showOptionStatus = true;
  }
  hideOption() {
    this.showOptionStatus = false;
  }

  // 4.表格选择事件
  handleSelectionChange(val: any): void {
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  colspan: any = {};
  rowspan: any = {
    num: 0,
    rowIndex: 0,
    columnIndex: [],
  };
  // 根据数组中的对象中的中文字段进行排序 把同样内容的两条对象挨到一起，以备合并单元格所用。
  // localeCampare is not a function
  compare(property) {
    return function (a, b) {
      var value1 = a[property];
      var value2 = b[property];
      return value1.localeCampare(value2);
    };
  }
  // 合并行数
  getSpanArr(data, val) {
    let obj = {};
    let deviceId;
    data.map((k, i) => {
      deviceId = k.deviceId;
      if (!obj[deviceId]) obj[deviceId] = [];
      obj[deviceId].push(k);
    });

    let num = {};
    let arr = [];
    let rowIndex = [];
    for (let key in obj) {
      num[key] = obj[key].length;
      rowIndex.push(arr.length);
      arr = [...arr, ...obj[key]];
    }

    this.colspan = {};
    if (val == "normal") {
      this.rowspan = {
        num: num,
        rowIndex: rowIndex,
        columnIndex: [0],
      };
    }

    if (val == "control") {
      this.rowspan = {
        num: num,
        rowIndex: rowIndex,
        columnIndex: [0, 4],
      };
    }
    return arr;
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (this.rowspan) {
      if (
        this.rowspan.columnIndex &&
        this.rowspan.columnIndex.length > 0 &&
        this.rowspan.columnIndex.indexOf(columnIndex) > -1
      ) {
        if (this.rowspan.rowIndex.indexOf(rowIndex) > -1) {
          return {
            colspan: 1,
            rowspan: this.rowspan.num[row.deviceId]
              ? this.rowspan.num[row.deviceId]
              : 1,
          };
        } else {
          return {
            colspan: 0,
            rowspan: 0,
          };
        }
      }
    }
  }

  // 环境监控-空调（空调控制、视频）-风机（视频、开）
  handleBtn(item: string, row: any): void {}
  private svgUrl = "";
  tableDta: any = [];
  mounted() {
    //当前时间
    // var dataTime = new Date().getTime();
    // (this as any).datatime = time(dataTime);
    // var dataTime7 = dataTime - 3600 * 1000 * 24 * 7;
    // (this as any).datatime7 = time(dataTime7);
    // this.form.times.push((this as any).datatime7);
    // this.form.times.push((this as any).datatime);

    // console.log("this.$route.query:", this.$route.query);
    let routerIfo = this.$route.query;
    this.init(routerIfo);
    // this.echaInit();
  }
  areaID: any = [];
  //   init(routerIfo) {
  //     // 台账信息
  //     let AllAuxiliary = GetSocketModule.getterAllAuxiliaryPointer || [];
  //     // console.log(AllAuxiliary);
  //     AllAuxiliary = _.cloneDeep(AllAuxiliary);
  //     let newArea = [];
  //     let test = [];
  //     AllAuxiliary.forEach((v) => {
  //       if (v.deviceId === routerIfo.deviceId) {
  //         //   if (v.area.indexOf(v.area) == -1) {
  //         //     newArea.push(v.area);
  //         //   }
  //         newArea.push(v.area);
  //         newArea.forEach((i) => {
  //           if (newArea.indexOf(i) == -1) {
  //             if (newArea && newArea.length) {
  //               newArea.push(i);
  //               break;
  //             }
  //           }
  //         });
  //       }

  //       this.areaID = newArea;
  //     });
  //     AllAuxiliary.forEach((a) => {
  //       if (a.area === this.areaID[0]) {
  //         test.push(a);
  //       }
  //     });
  //     // console.log(this.tableDta);
  //     this.tableDta.forEach((i) => {
  //       if (i.xtValue === "04") {
  //         this.tableDta.push(i);
  //       }
  //       //   if (test.indexOf(i.xtValue) === "04") {
  //       //   }
  //     });

  //     // console.log(test);
  //     console.log(this.areaID);
  //     // console.log(this.tableDta);
  //   }
  init(routerIfo) {
    let AllAuxiliary = GetSocketModule.getterAllAuxiliaryPointer || [];
    // console.log(AllAuxiliary);
    let newArea = "";
    for (var i = 0; i < AllAuxiliary.length; i++) {
      let item = AllAuxiliary[i];
      if (item.deviceId === routerIfo.deviceId) {
        newArea = item.area;
        break;
      }
    }
    let newData = [];
    AllAuxiliary.forEach((v) => {
      if (v.area === newArea && v.remoteType === "1" && v.xtValue === "04") {
        if (v.deviceType === "0402") {
          // 微气象
          newData.push(v);
        } else if (v.deviceType === "0401") {
          // 温湿度
          newData.push(v);
        } else if (v.deviceType === "0406") {
          // SF6气体
          newData.push(v);
        } else if (v.deviceType === "0403") {
          //
          newData.push(v);
        } else if (v.deviceType === "0407") {
          // 空调
          newData.push(v);
        } else if (v.deviceType === "0409") {
          //  SF6主机
          newData.push(v);
        } else if (v.deviceType === "0408") {
          // 水浸传感器
          newData.push(v);
        }
        // if (v.deviceType === this.oldMenuList.SBID) {
        //   // 微气象
        //   newData.push(v);
        // }
      }
    });
    // console.log(newData);
    this.tableDta = newData;
  }

  @Watch("$route", { immediate: true })
  changeEvent() {
    this.setSvg();
  }
  setSvg() {
    if (this.$route.query.code) {
      let stationId = this.$route.query.code;
      let type = "环境监控";
      let form = {
        stationId: stationId,
        menuName: type,
      };
      (this as any).$services
        .queryDwUrl({ data: form, method: "get" })
        .then((result: any) => {
          // console.log("获取绘图图片地址:", result);
          let data = result.data;
          this.svgUrl = data;
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }
  chartClick() {}
  //弹框from表单
  form: any = {
    times: [],
  };
  //   echaInit() {
  //     this.loading2 = true;
  //     var fromEcha = {00
  //       endTime: this.form.times[1],
  //       startTime: this.form.times[0],
  //       // dwId: this.datas.id, // 点位id
  //       dwId: "", // 点位id
  //       // stationId: this.stationId, // 站id
  //       interval: "",
  //     };
  //     if (this.form.times && this.form.times.length > 1) {
  //       fromEcha.endTime = this.form.times[1];
  //       fromEcha.startTime = this.form.times[0];
  //       if (this.form.times[0] == this.form.times[1]) {
  //         fromEcha.endTime = this.form.times[1].slice(0, 10) + " 23:59:59";
  //       }
  //     } else {
  //       fromEcha.endTime = "";
  //       fromEcha.startTime = "";
  //     }
  //     (this as any).$services
  //       .queryHistoryChart({ data: fromEcha })
  //       .then((result: any) => {
  //         if (result.data) {
  //           var dataName = [];
  //           var dataVal = [];
  //           let resdata = result.data.reverse();
  //           resdata.map((item) => {
  //             dataName.push(item.time);
  //             dataVal.push(item.val);
  //           });
  //           this.option.xAxis.data = dataName;
  //           this.option.series[0].data = dataVal;
  //           this.loading2 = false;
  //         }
  //       })
  //       .catch((err: object) => {
  //         // console.log(err);
  //         this.loading2 = false;
  //       });
  //   }
}
</script>

<style lang="scss" scoped>
.ecocrisis {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .top {
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    &-name {
      width: 10rem;
      font-size: 0.2rem;
      font-weight: 400;
      color: rgba(118, 238, 250, 1);
    }
    &-back {
      width: 0.9rem;
      height: 0.3rem;
      background: url("../../../../assets/img/return.png") no-repeat center
        center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.4rem);
    &-center {
      width: 10rem;
      height: 100%;
      margin: 0 0.2rem;
      padding: 0.2rem;
    }
    .tableClass {
      height: 6rem;
      display: flex;
      justify-content: space-between;
      .middleRight {
        .linechart {
          width: 100%;
          height: calc(100% - 0.27rem);
          > div {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    &-right {
      width: 100%;
      height: 100%;
      &-menu {
        width: 100%;
        height: 0.32rem;
        display: flex;
        .item {
          flex: 1;
          // width: 1.6rem;
          padding: 0 0.2rem;
          height: 0.32rem;
          font-size: 0.2rem;
          border: 1px solid #05b4ff;
          background-color: transparent;
          cursor: pointer;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .itemslh {
          width: 0.4rem;
          padding: 0 0.2rem;
          height: 0.32rem;
          font-size: 0.2rem;
          border: 1px solid #05b4ff;
          background-color: transparent;
          cursor: pointer;
        }
        .item:hover,
        .itemslh:hover {
          background-color: #234d74;
        }
        .active {
          border: 1px solid rgba(22, 100, 201, 1);
          background: linear-gradient(
            180deg,
            rgba(6, 86, 238, 1) 0%,
            rgba(6, 88, 241, 1) 34%,
            rgba(3, 44, 121, 1) 100%
          );
        }
        .option {
          position: absolute;
          right: 0;
          top: 0.32rem;
          width: 35%;
          z-index: 11;
          .item {
            width: 100%;
            height: 0.32rem;
            font-size: 0.2rem;
            border: 1px solid #05b4ff;
            background-color: transparent;
            cursor: pointer;
          }
          .item:hover {
            background-color: #234d74;
          }
        }
      }
      &-collapse {
        width: 100%;
        height: 2rem;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
        .icon {
          position: absolute;
          top: 50%;
          z-index: 98;
          color: #36b0eb;
          padding: 0.1rem;
          font-size: 0.2rem;
          cursor: pointer;
        }
        .icon-left {
          left: 2%;
          transform: rotate(180deg);
        }
        .icon-right {
          right: 2%;
        }
        .icons {
          color: #ccc;
        }
        .icons2 {
          color: #ccc;
        }
        .tans {
          position: absolute;
          width: 100%;
          height: 100%;
          transition: all 0.6s;
          top: 0;
        }
        .right-top-rotation {
          height: 100%;
          width: calc(100% - 0.8rem);
          margin: 0 0.4rem;
          overflow: hidden;
          position: relative;
          white-space: nowrap;
          .rotation-img {
            height: 100%;
            width: 33.3%;
            display: inline-block;
            position: relative;
            cursor: pointer;
            .bg-out {
              // width: 1.86rem;
              height: 1.88rem;
              background: url("../../../../assets/img/AuxiliaryMonitor/txzt-x.png")
                no-repeat center center;
            }
            .rotation-text {
              position: absolute;
              width: 100%;
              left: 50%;
              top: 85%;
              transform: translateX(-50%);
              cursor: pointer;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 0.14rem;
            }
          }
          .rotation-img:hover {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.16rem;
            }
          }
          .visited {
            .bg-in {
              transform: scale(1.1);
            }
            > .rotation-text {
              transition: all 0.2s;
              bottom: 1%;
              font-size: 0.18rem;
              color: #1ab2ff;
            }
          }
        }
      }
      &-cylinder {
        width: 100%;
        height: 1.5rem;
        margin: 0.1rem auto;
        padding: 0 0.1rem;
        box-sizing: border-box;
        > div {
          width: 1.2rem;
          height: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .number {
            position: absolute;
            top: 0.2rem;
            left: 0;
            width: 100%;
            font-family: "numfont";
            font-size: 0.24rem;
            text-align: center;
          }
          .blue {
            color: rgba(3, 189, 254, 1);
          }
          .green {
            color: rgba(14, 252, 158, 1);
          }
          .yellow {
            color: rgba(254, 159, 55, 1);
          }
          .text {
            width: 100%;
            text-align: center;
          }
        }
      }
      &-table {
        width: 100%;
        height: calc(100% - 4.2rem);
        margin: 0.1rem auto;
        box-sizing: border-box;
        .iconClick {
          display: inline-block;
          width: 0.42rem;
          height: 0.2rem;
          background: url(../../../../assets/img/OnlineMonitor/cli_qx.png)
            no-repeat;
          background-size: 100% 100%;
          vertical-align: middle;
          cursor: pointer;
        }
        .iconClick:hover {
          background: url(../../../../assets/img/OnlineMonitor/nor_qx.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
.ecocrisis {
  .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    background-color: transparent;
  }
  .el-button--text .el-btn-icon {
    font-size: 0.22rem;
  }
  .main-right-table .el-button--text.is-disabled {
    color: #ccc;
    border-color: transparent;
    height: 5rem;
  }
  .el-table .cell .abnormal {
    color: rgba(246, 91, 55, 1);
  }
}
</style>

